<template>
  <div class="app-container">
    <el-row :gutter="30">
      <el-col :span="24">
        <!--<div style="margin-top:10px">-->
          <!--<el-button icon="el-icon-close" type="danger" size="mini" @click="deleteAny">删除</el-button>-->
        <!--</div>-->
        <div class="query-form">
          <el-form ref="tableSearchParam" :model="tableSearchParam" label-width="50px" :inline="true">
            <el-form-item label="保单号" label-width="70px">
              <el-input v-model="tableSearchParam.insuranceNo" style="width:200px" size="small"
                        clearable></el-input>
            </el-form-item>
            <el-form-item label="保险公司" label-width="70px">
              <el-input v-model="tableSearchParam.insuranceCompanyName" style="width:200px" size="small"
                        clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="listTableData" icon="el-icon-search" size="small">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <br/>
        <el-table
          :data="tableData"
          border
          empty-text="暂无数据"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          default-expand-all
          v-loading="tableLoading">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" class="demo-table-expand">
                <el-row>
                  <el-col :span="7">
                    <el-form-item label="事故编号:" label-width="110px">
                      <span>{{ props.row.accidentNo }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="7">
                    <el-form-item label="保单号:" label-width="60px">
                      <el-tooltip :content="props.row.insuranceNo" placement="bottom" effect="light">
                        <span class="desc">{{props.row.insuranceNo}}</span>
                      </el-tooltip>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="保单产品:" label-width="110px">
                      <span>{{ props.row.insuranceName }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            type="selection"
            width="40">
          </el-table-column>
          <el-table-column
            label="保险公司"
            property="insuranceCompanyName">
          </el-table-column>
          <el-table-column
            label="垫付时间"
            property="payTime"
            width="150">
          </el-table-column>
          <el-table-column
            label="应收金额"
            property="payTotal"
            width="75">
          </el-table-column>
          <el-table-column
            label="已收金额"
            property="payReceived"
            width="75">
          </el-table-column>
          <el-table-column
            label="待收金额"
            property="paySurplus"
            width="105">
          </el-table-column>
          <el-table-column
            label="处理进度"
            width="80">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.payStatus!=null && scope.row.payStatus!=''"
                      :type="convertPayStatus(scope.row.payStatus)[0]">
                {{convertPayStatus(scope.row.payStatus)[1]}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-dropdown placement="bottom" trigger="click">
                <el-button>
                  操作<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <el-button
                      size="mini"
                      icon="el-icon-view"
                      type="primary"
                      @click="viewData(scope.$index, scope.row)">查看详细
                    </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item divided>
                    <el-button
                      size="mini"
                      icon="el-icon-check"
                      type="success"
                      @click="shoukuan(scope.$index, scope.row)">收&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;款
                    </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item divided>
                    <el-button
                      size="mini"
                      icon="el-icon-tickets"
                      type="warning"
                      @click="shoukuanjilu(scope.$index, scope.row)">收款记录
                    </el-button>
                  </el-dropdown-item>
                  <!--<el-dropdown-item divided>-->
                    <!--<el-button-->
                      <!--size="mini"-->
                      <!--icon="el-icon-close"-->
                      <!--type="danger"-->
                      <!--@click="handleNoValidOrder(scope.$index, scope.row)">删&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;除-->
                    <!--</el-button>-->
                  <!--</el-dropdown-item>-->
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page=this.currentPage
            :page-sizes="[5,10, 20, 30, 40]"
            :page-size=this.pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total=this.total>
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="应收款详情" :visible.sync="dialogFormVisible" top="2vh" width="70%">
      <el-form :model="accidentReportPayInfoData" inline>
        <el-row>
          <el-col :span="4" class="m-col">应收金额</el-col>
          <el-col :span="8" class="m-col-left">{{accidentReportPayInfoData.payTotal}}</el-col>
          <el-col :span="4" class="m-col-left">已收金额</el-col>
          <el-col :span="8" class="m-col-left">{{accidentReportPayInfoData.payReceived}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">待收金额</el-col>
          <el-col :span="8" class="m-col-left">{{accidentReportPayInfoData.paySurplus}}</el-col>
          <el-col :span="4" class="m-col-left">收款进度</el-col>
          <el-col :span="8" class="m-col-left">
            <el-tag v-if="accidentReportPayInfoData.payStatus!=null && accidentReportPayInfoData.payStatus!=''"
                    :type="convertPayStatus(accidentReportPayInfoData.payStatus)[0]">
              {{convertPayStatus(accidentReportPayInfoData.payStatus)[1]}}
            </el-tag>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="m-col" style="font-weight: bold">应收款来源</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">事故编号</el-col>
          <el-col :span="8" class="m-col-left">{{accidentReportPayInfoData.accidentNo}}</el-col>
          <el-col :span="4" class="m-col-left">订单号</el-col>
          <el-col :span="8" class="m-col-left">
            {{accidentReportPayInfoData.insuraneOrderNo}}
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">保单号</el-col>
          <el-col :span="8" class="m-col-left">{{accidentReportPayInfoData.insuranceNo}}</el-col>
          <el-col :span="4" class="m-col-left">投保产品</el-col>
          <el-col :span="8" class="m-col-left">
            {{accidentReportPayInfoData.insuranceName}}
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">付款人</el-col>
          <el-col :span="8" class="m-col-left">{{accidentReportPayInfoData.payUserName}}</el-col>
          <el-col :span="4" class="m-col-left">付款时间</el-col>
          <el-col :span="8" class="m-col-left">
            {{accidentReportPayInfoData.payTime}}
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col" style="border-bottom: 1px solid #ebeef5;">付款金额</el-col>
          <el-col :span="20" class="m-col-left" style="border-bottom: 1px solid #ebeef5;">
            {{accidentReportPayInfoData.payAmount}}
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">

      </div>
    </el-dialog>
    <el-dialog title="收款" :visible.sync="dialogShoukuanFormVisible" top="10vh">
      <el-form :model="shoukuanData">
        <el-form-item label="应收金额" label-width="70px">
          {{shoukuanData.payTotal}}
        </el-form-item>
        <el-form-item label="已收金额" label-width="70px">
          {{shoukuanData.payReceived}}
        </el-form-item>
        <el-form-item label="待收金额" label-width="70px">
          {{shoukuanData.paySurplus}}
        </el-form-item>
        <el-form-item label="收款金额" label-width="70px">
          <el-input-number v-model="shoukuanData.collectionAmount" :precision="2" :step="0.01"
                           style="width:250px" @change="collectionAmountChange"></el-input-number>
        </el-form-item>
        <el-form-item label="收款员工" label-width="70px">
          <el-select v-model="shoukuanData.collectUserId" placeholder="请选择" style="width:250px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收款时间" label-width="70px">
          <el-date-picker
            v-model="shoukuanData.colletionTime"
            type="datetime"
            placeholder="选择日期时间"
            style="width:250px">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogShoukuanFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleShoukuan">保存</el-button>
      </div>
    </el-dialog>
    <el-dialog title="收款记录" :visible.sync="dialogShoukuanJiluFormVisible" top="10vh">
      <el-form :model="accidentReportPayRecordData" inline>
        <el-row>
          <el-col :span="4" class="m-col">应收金额</el-col>
          <el-col :span="8" class="m-col-left">{{accidentReportPayRecordData.payTotal}}</el-col>
          <el-col :span="4" class="m-col-left">已收金额</el-col>
          <el-col :span="8" class="m-col-left">{{accidentReportPayRecordData.payReceived}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">待收金额</el-col>
          <el-col :span="8" class="m-col-left">{{accidentReportPayRecordData.paySurplus}}</el-col>
          <el-col :span="4" class="m-col-left">收款进度</el-col>
          <el-col :span="8" class="m-col-left">
            <el-tag v-if="accidentReportPayRecordData.payStatus!=null && accidentReportPayRecordData.payStatus!=''"
                    :type="convertPayStatus(accidentReportPayRecordData.payStatus)[0]">
              {{convertPayStatus(accidentReportPayRecordData.payStatus)[1]}}
            </el-tag>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="m-col">收款记录</el-col>
        </el-row>
        <el-table
          :data="accidentReportPayRecordData.payRecordTableData"
          border
          empty-text="暂无数据"
          style="width: 100%"
          height="300">
          <el-table-column
            type="index"
            width="40">
          </el-table-column>
          <el-table-column
            label="收款人"
            property="collectUserId">
          </el-table-column>
          <el-table-column
            label="收款金额"
            property="collectionAmount"
            width="75">
          </el-table-column>
          <el-table-column
            label="收款时间"
            property="colletionTime"
            width="150">
          </el-table-column>
        </el-table>
      </el-form>
      <div slot="footer" class="dialog-footer">

      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
  .page {
    text-align: center;
    margin-top: 20px;
  }

  .query-form {
    border-bottom: 1px solid #ebeef5;
    padding-top: 25px;
  }

  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

  .m-col {
    border: 1px solid #ebeef5;
    border-bottom: none;
    padding-left: 10px;
    height: 40px;
    line-height: 40px;
    color: #909399;
    font-weight: 500;
  }

  .m-col-left {
    border: 1px solid #ebeef5;
    border-left: none;
    border-bottom: none;
    padding-left: 10px;
    height: 40px;
    line-height: 40px;
  }

  .m-col-bottom {
    border: 1px solid #ebeef5;
    padding-left: 10px;
    height: 250px;
    line-height: 250px;
    color: #909399;
    font-weight: 500;
  }

  .m-col-bottom-left {
    border: 1px solid #ebeef5;
    border-left: none;
    padding-left: 10px;
    height: 250px;
    overflow-y: auto;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .desc {
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box; /** 将对象作为伸缩盒子模型显示 **/
    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
    -webkit-line-clamp: 1; /** 显示的行数 **/
    overflow: hidden; /** 隐藏超出的内容 **/
  }
</style>

<script>
  import accidentReportPayInfoApi from '@/api/accidentReportPayInfoApi'
  import accidentReportPayRecordApi from '@/api/accidentReportPayRecordApi'

  export default {
    created() {
      this.listTableData()
    },
    data() {
      return {
        dialogShoukuanJiluFormVisible: false,
        accidentReportPayRecordData: {},
        dialogShoukuanFormVisible: false,
        shoukuanData: {},
        tableLoading: true,
        dialogFormVisible: false,
        tableSearchParam: {
          tableSearchParam: ''
        },
        accidentReportPayInfoData: {},
        tableData: [],
        currentPage: 1,
        pageSize: 5,
        total: 0,
        noValidData: {
          id: '',
          insuranceValided: '',
          insuranceValidedDesc: ''
        },
        multipleSelection: []
      }
    },
    methods: {
      listTableData() {
        this.tableLoading = true
        accidentReportPayInfoApi.list(this.tableSearchParam, this.currentPage, this.pageSize, (res) => {
          this.tableData = res.list
          this.total = res.total
          this.tableLoading = false
        }, () => {
        })
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.listTableData()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.listTableData()
      },
      handleSelectionChange(val) {
        this.multipleSelection = []
        for (var ms of val) {
          this.multipleSelection.push(ms.id)
        }
      },
      viewData(index, row) {
        accidentReportPayInfoApi.get(row.id, (res) => {
          this.accidentReportPayInfoData = res
          this.dialogFormVisible = true
        }, () => {
        })
      },
      shoukuan(index, row) {
        this.shoukuanData = {
          collectionAmount: 0,
          collectUserId: '',
          colletionTime: ''
        }

        this.shoukuanData.accidentReportPayId = row.id
        this.shoukuanData.payTotal = row.payTotal
        this.shoukuanData.payReceived = row.payReceived
        this.shoukuanData.paySurplus = row.paySurplus
        this.shoukuanData.temPaySurplus = row.paySurplus
        this.dialogShoukuanFormVisible = true
      },
      handleShoukuan() {
        accidentReportPayRecordApi.add(this.shoukuanData, (res) => {
          this.$message({
            type: 'success',
            message: '保存成功'
          })
          this.dialogShoukuanFormVisible = false
          this.listTableData()
        }, () => {
        })
      },
      collectionAmountChange(value) {
        if (value > this.shoukuanData.temPaySurplus) {
          this.$message({
            type: 'warning',
            message: '收款金额超过待收金额!'
          })
          return;
        }
        this.shoukuanData.paySurplus = this.shoukuanData.temPaySurplus - value
      },
      shoukuanjilu(index, row) {
        accidentReportPayRecordApi.list({accidentReportPayId: row.id}, 1, 100, (res) => {
          this.accidentReportPayRecordData.payRecordTableData = res.list
          this.accidentReportPayRecordData.payTotal = row.payTotal
          this.accidentReportPayRecordData.payReceived = row.payReceived
          this.accidentReportPayRecordData.paySurplus = row.paySurplus
          this.accidentReportPayRecordData.payStatus = row.payStatus
          this.dialogShoukuanJiluFormVisible = true
        }, () => {
        })
      },
      convertPayStatus(payStatus) {
        let convertRet = []
        switch (payStatus) {
          case '0':
            convertRet[0] = 'danger'
            convertRet[1] = '待收款'
            break
          case '1':
            convertRet[0] = 'warning'
            convertRet[1] = '收款中'
            break
          case '2':
            convertRet[0] = 'success'
            convertRet[1] = '已收款'
            break
        }
        return convertRet
      },
      deleteAny() {
        if (this.multipleSelection.length == 0) {
          this.$message({
            type: 'warning',
            message: '请选择记录!'
          })
          return;
        }
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          accidentReportPayInfoApi.remove(this.multipleSelection, (res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.listTableData()
          }, () => {
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
    }
  }
</script>
